import React, {Component, Fragment} from 'react';
import Moment from 'moment'
import { Input, Layout, Breadcrumb, Table, Divider, Tag, Button, Row, Col} from 'antd';
import Footer from './components/footer'
import Header from './components/header'
import "./App.css"
import logo from './logo.svg'

const {Content} = Layout;

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      size: 'small',
      list:[],
      inputValue:'',
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      columns:[
        {
          title: 'Title',
          dataIndex: 'title',
          key: 'title',
          render: text => <span>{text}</span>,
        },
        {
          title: 'Create_At',
          dataIndex: 'create_at',
          key: 'create_at',
        },
        {
          title: 'Status',
          dataIndex: 'status',
          key: 'status',
          render: status => {
            let color = status ? 'geekblue' : 'green';
            let sta = status ? 'complete' : 'pending'
            return (
              <span>
                <Tag color={color} key={status}>
                  {sta.toUpperCase()}
                </Tag>
              </span>
            );
          } 
        },
        {
          title: 'Action',
          key: 'action',
          render: (text, record, index) => {
            return(
              <div>
                <Button icon="check" size={this.state.size} onClick={this.handleCheck.bind(this, index)}>Invite</Button>
                <Divider type="vertical" />
                <Button type="primary" icon="delete" size={this.state.size} onClick={this.handleRemoveData.bind(this, index)}>Delete</Button>
              </div>
            )
            
          },
        },
      ]
    }
    this.handleAdd=this.handleAdd.bind(this)
    this.handleChange = this.handleChange.bind(this)
    
  }
  
  handleAdd(){
    let index = this.state.list.length
    let obj = {
      key:index,
      title:this.state.inputValue,
      status:false,
      create_at:Moment().format('L')
    }
    this.setState({
      list:[...this.state.list, obj],
      inputValue:''
    })
    
  }
  handleCheck(index){
    let target = this.state.list[index]
    target.status=!target.status
    console.log(this.state.list[index])
    this.setState({
      list:this.state.list
    })
  }
  handleChange(e){
    console.log(e.target.value)
    this.setState({
        inputValue:e.target.value
      }
    )
  }
  handleRemoveData(index){
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({list})
  }
  getToItem(){
    // console.log(this.state.list)
    // return (
    //   this.state.list.map((item, index)=>{
    //     return (<ToItem 
    //       deletData={this.handleRemoveData} 
    //       index={index} 
    //       key={index} 
    //       content={item} 
    //       />)
    //   })
    // )
  }
  render(){

    

    return (
      <Fragment>
        <Layout className="layout" style={{height:"100%"}}>
          
          <Header username={this.props.name} initKey={'3'} logo={logo} />

          <Row type={'flex'} justify={'center'} >
              <Col xs={{span:24}} md={{span:16}} >
                <Content>
                  <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>应用</Breadcrumb.Item>
                    <Breadcrumb.Item>代办事项</Breadcrumb.Item>
                  </Breadcrumb>

                  <div style={{ background: '#fff', padding: 24, minHeight: 480 }}>
                    {/* <ul>{this.getToItem()}</ul> */}
                    <Row type={'flex'} justify={'center'} gutter={[16, 16]}>
                        <Col xs={{span:8, offset:0, order:0}}  md={{span:11, offset:0, order:0}}>
                            <Button type="primary" icon="check">Save</Button>
                        </Col>
                        <Col xs={{span:24, offset:0, order:2}} md={{span:6, offset:4, order:1}}>
                            <Input  placeholder="Basic usage" value={this.state.inputValue} onChange={this.handleChange}   />
                        </Col>
                        <Col xs={{span:8, offset:8, order:1}}  md={{span:3, offset:0, order:2}}>
                            <Button type="primary" icon="plus" onClick={this.handleAdd} block>Add</Button>
                        </Col>
                    </Row>

                    <Row>&nbsp;</Row>

                    <Row type={'flex'} justify={'center'}>
                        <Col xs={{span:24}}>
                            <Table rowSelection={rowSelection} columns={this.state.columns} dataSource={this.state.list} size={'small'} />
                        </Col>
                    </Row>
                    
                  </div>
                </Content>
              </Col>
          </Row>
          
          <Footer logo={logo} />  
        </Layout>
      </Fragment>
    );
  }
  
}

export default App;
